<template>
	<view class="flex-col page">
		<view class="justify-center group">
			<image @click="Back()"
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621783633159.png"
				class="image" />
			<text class="text">订单详情</text>
		</view>
		<scroll-view scroll-y="true" class="scroll">
			<view class="flex-col section_1">
				<!--  -->
				<view class="justify-between group_1" v-if="ordersStatus ==1">
					<view class="flex-col items-start group_2">
						<text class="text_1">订单待付款</text>
						<view class="u-flex u-col-center u-m-t-5">
							<text class="text_2">剩余时间：</text>
							<u-count-down :time="lefttime" format="HH:mm:ss"></u-count-down>
						</view>
					</view>
					<view class="flex-col items-center group_3">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706439817993.png"
							class="image_1" />
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706471851315.png"
							class="image_2" />
					</view>
				</view>
				<!--  -->
				<view class="justify-between group_1" v-if="ordersStatus ==2">
					<view class="flex-col items-start group_2">
						<text class="text_1">订单待上传资料</text>
						<text class="text_2">请用电脑登录后上传相关设计需求</text>
					</view>
					<view class="flex-col items-center group_3">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706439817993.png"
							class="image_1" />
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706471851315.png"
							class="image_2" />
					</view>
				</view>
				<!--  -->
				<view class="justify-between group_1" v-if="ordersStatus ==3">
					<view class="flex-col items-start group_2">
						<text class="text_1">订单进行中</text>
						<text class="text_2">其他格式文件可在web端上传</text>
					</view>
					<view class="flex-col items-center group_3">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706439817993.png"
							class="image_1" />
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706471851315.png"
							class="image_2" />
					</view>
				</view>
				<!--  -->
				<view class="justify-between group_1" v-if="ordersStatus ==4">
					<view class="flex-col items-start group_2">
						<text class="text_1">订单待评价</text>
						<text class="text_2">请对本次服务评价</text>
					</view>
					<view class="flex-col items-center group_3">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706439817993.png"
							class="image_1" />

						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706471851315.png"
							class="image_2" />
					</view>
				</view>
				<!--  -->
				<view class="justify-between group_1" v-if="ordersStatus ==5">
					<view class="flex-col items-start group_2">
						<text class="text_1">订单已完成</text>
					</view>
					<view class="flex-col items-center group_3">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706439817993.png"
							class="image_1" />
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706471851315.png"
							class="image_2" />
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827823312767911.png"
							class="image_7" />
					</view>
				</view>
				<view class="justify-between group_1" v-else-if='ordersStatus ==6'>
					<view class="flex-col items-start group_2">
						<text class="text_1">订单已取消</text>
					</view>
					<view class="flex-col items-center group_3">
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706439817993.png"
							class="image_1" />
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706471851315.png"
							class="image_2" />
						<!-- <image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706439817993.png"
							class="image_1" />
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836706471851315.png"
							class="image_2" />
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557827823312767911.png"
							class="image_7" /> -->
					</view>
				</view>
			</view>
			<view class="flex-col group_4">
				<view class="flex-col section_2">
					<view class="flex-row">
						<view class="section_3 view">
							<!--*-->
						</view>
						<text class="text_3">设计订单</text>
					</view>
					<view class="justify-between group_6">
						<text class="text_4">你的房屋位置</text>
						<text class="text_5">{{infodate.address}}</text>
					</view>
					<view class="justify-between group_7">
						<text class="text_6">你的房屋面积</text>
						<text class="text_7">{{infodate.roomArea}}m²</text>
					</view>
					<view class="justify-between group_8">
						<text class="text_8">房屋类型</text>
						<text class="text_9">{{infodate.roomTypeName}}</text>
					</view>
				</view>
				<view class="flex-col section_4">
					<view class="flex-row group_9">
						<view class="section_3 view_1">
							<!--*-->
						</view>
						<text class="text_10">设计类别</text>
					</view>
					<view class="flex-row group_10">
						<text class="text_11">{{infodate.designTypeName}}</text>
						<view class="flex-row"> <text class="text_12">{{infodate.designTypeMoney}}/m²</text>
							<text class="text_133">（施工图+效果图）</text>
						</view>

					</view>
					<view class="justify-between group_11">
						<text class="text_13">总额</text>
						<text class="text_14">￥{{infodate.totalMoney}}</text>
					</view>
					<view class="justify-between group_12">
						<text class="text_15">优惠券</text>
						<text class="text_16">-￥{{infodate.couponsMoney}}</text>
					</view>
					<view class="justify-end group_13">
						<text class="text_17"> {{ordersStatus == 1 ? '应付款:' : '实付款:'}}</text>
						<view class="group_14">
							<text class="text_18">￥</text>
							<text class="text_19">{{infodate.payableMoney}}</text>
						</view>
					</view>
				</view>

				<view class="flex-col section_55 u-col-center">
					<text class="text_211">请登录网址登录您的账号上传相关需求内容。</text>
					<view class="justify-between  w-full">
						<view class="gray u-flex u-row-center u-col-center radio-16">
							<text class="text_222">
								{{$PC_URL}}
							</text>
							<text class="text_233" @click="copy($PC_URL)">复制</text>
						</view>

					</view>
				</view>

				<view class="flex-col section_5" v-if="ordersStatus==5">
					<view class="flex-row group_15">
						<view class="section_3 view_2">
						</view>
						<text class="text_20">设计反馈图片</text>
					</view>
					<view class="flex-row equal-division">
						<view v-for="(item,index) in renderings" :key="index">
							<image :src='item' class="equal-division-item image_3" v-if="renderings.length >= 0" />
							<text v-else>无</text>
						</view>


					</view>
				</view>

				<view class="flex-col section_5">
					<view class="flex-row group_15">
						<view class="section_3 view_2">
							<!--*-->
						</view>
						<text class="text_20">相关资料</text>
					</view>

					<view class="flex-row u-flex-wrap equal-division w-full" v-if="designDrawings.length>0">
						<view v-for="(item,i) in designDrawings" :key="i">
							<image :src="item" class="equal-division-item image_3" @click="prview(i,designDrawings)" />
						</view>
					</view>
					<!-- 相关资料 -->
					<view class="flex-row u-flex-wrap equal-division w-full" v-if="designIllustrates.length>0">
						<view v-for="(item,i) in designIllustrates" :key="i">
							<image :src="item" class="equal-division-item image_3"
								@click="prview(i,designIllustrates)" />
						</view>
					</view>
					<view class="u-m-t-20" v-else>
						<u-empty></u-empty>
					</view>
				</view>
				<view class="flex-col section_5" v-if="ordersStatus==5">
					<view class="flex-row group_15">
						<view class="section_3 view_2">
							<!--*-->
						</view>
						<text class="text_20">评价信息</text>
					</view>
					<view class="line u-m-b-20">

					</view>
					<view class="u-flex u-row-between">
						<view class="commentbtn">
							<text class="u-font-24" v-if="infodate.commentsLevel ==1">非常满意</text>
							<view class="u-font-24" v-else-if="infodate.commentsLevel ==2">满意</view>
							<view class="u-font-24" v-else-if="infodate.commentsLevel ==3">一般</view>
							<view class="u-font-24" v-else>非常满意</view>
						</view>
						<text class="commentdate">{{infodate.commentsTime}}</text>
					</view>
					<view class="comment_content">
						<text>
							{{infodate.commentsDetails}}
						</text>
					</view>
					<view class="comment_pic" v-if="designDrawings.length>0">
						<image v-for="(item,i) in designDrawings" :key="i" :src="item"
							style="width: 156rpx; height:156rpx" @click="prview(i,designDrawings)"></image>

					</view>
				</view>
				<view class="flex-col section_6">
					<view class="flex-row group_16">
						<view class="section_3 view_3">
							<!--*-->
						</view>
						<text class="text_21">备注</text>
					</view>
					<view class="gray u-flex u-row-left u-col-center u-p-l-20 u-font-26"
						style="width: 100%;border-radius: 10rpx; ">

						{{infodate.remark?infodate.remark:'无'}}
					</view>
				</view>
				<view class="flex-col section_7">
					<view class="flex-row group_17">
						<text class="text_21">订单信息</text>
					</view>
					<view class="flex-col group_18">
						<view class="flex-row">
							<text class="text_23">订单编号</text>
							<text class="text_24">{{infodate.ordersNumber}}</text>
							<text class="text_25" @click="copy(infodate.ordersNumber)">复制</text>
						</view>

						<view class="flex-row group_20">
							<text class="text_26">下单时间</text>
							<text class="text_27">{{infodate.ordersTime}}</text>
						</view>
					</view>
					<view class="flex-row group_21" v-if="ordersStatus != 1">
						<text class="text_28">付款金额</text>
						<text class="text_29">￥{{infodate.payableMoney}}</text>
					</view>
					<view class="flex-row group_22" v-if="ordersStatus != 1">
						<text class="text_30">支付方式</text>
						<text class="text_31" v-if="infodate.payType ==1">微信支付</text>
						<text class="text_31" v-else>支付宝支付</text>

					</view>
					<view class="flex-row group_23" v-if="ordersStatus != 1">
						<text class="text_32">支付时间</text>
						<text class="text_33">{{infodate.payTime}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="justify-between section_8 fixed" v-if="ordersStatus ==1">
			<view class="flex-row group_24">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
					class="image_7" />
				<text class="text_34" @click="go('/pages/my/message/kefu')">联系客服</text>
			</view>
			<view class="u-flex">
				<view class="flex-col items-center text-wrapper_22"><text class="text_35" @click="cancelT">取消订单</text>
				</view>
				<view class="flex-col items-center text-wrapper_1" @click="topay"><text class="text_36">去付款</text>
				</view>
			</view>

		</view>
		<view class="justify-between section_8 fixed" v-else-if="ordersStatus ==2">
			<view class="flex-row group_24">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
					class="image_7" />
				<text class="text_34" @click="go('/pages/my/message/kefu')">联系客服</text>
			</view>
			<view v-if="infodate.status==0" class="flex-col items-center u-row-center text-wrapper_1"><text
					class="text_35" @click="wanshan">完善资料</text></view>
			<view v-if="infodate.status==1 || infodate.status==2 || infodate.status==3"
				class="flex-col items-center u-row-center text-wrapper_1"><text class="text_35"
					@click="wanshan">补充资料</text></view>
		</view>
		<view class="justify-between section_8 fixed" v-else-if="ordersStatus ==3">
			<view class="flex-row group_24">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
					class="image_7" />
				<text class="text_34" @click="go('/pages/my/message/kefu')">联系客服</text>
			</view>
			<view class="u-flex u-row-right u-flex-1">
				<view class="flex-col items-center text-wrapper_22 u-m-r-20"><text class="text_35"
						@click="changeorderStatus">完成订单</text></view>
				<view v-if="infodate.status==0" class="flex-col items-center text-wrapper_1 u-m-r-20"><text
						class="text_35" @click="wanshan">完善资料</text></view>
				<view v-if="infodate.status==1 || infodate.status==2 || infodate.status==3"
					class="u-m-r-20 flex-col items-center u-row-center text-wrapper_1"><text class="text_35"
						@click="wanshan">完善资料</text></view>
			</view>

		</view>
		<view class="justify-between section_8 fixed" v-else-if="ordersStatus == 4">
			<view class="flex-row group_24">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
					class="image_7" />
				<text class="text_34" @click="go('/pages/my/message/kefu')">联系客服</text>
			</view>
			<view class="flex-col items-center u-row-center text-wrapper_1"><text class="text_35"
					@click="pingjia">评价</text></view>
		</view>
		<view class="justify-between section_8 fixed-bottom" v-else-if="ordersStatus ==5 || ordersStatus ==6 ">
			<view class="flex-row group_24">
				<image
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621862755728.png"
					class="image_7" />
				<text class="text_34" @click="go('/pages/my/message/kefu')">联系客服</text>
			</view>

		</view>
		<cancelOrder :show="cancelShow" @close="cancelShow = false" @confirm="confirm"></cancelOrder>
		<!-- 完成订单限制 弹窗提示 -->
		<u-modal :show="show" :title="title" :content='content' showConfirmButton showCancelButton @confirm='confirmBtn'
			@cancel='cancelBtn'></u-modal>
	</view>
</template>

<script>
	import cancelOrder from "@/pages/my/order/cancelOrder.vue"
	export default {
		components: {
			cancelOrder
		},
		data() {
			return {
				cancelShow: false, //取消订单的弹窗
				currentOrderid: 0,
				currentIndex: -1,
				value1: '',
				confirmType: 0,
				ordersId: '',
				infodate: [],
				renderings: [],
				designDrawings: [],
				designIllustrates: [],
				ordersStatus: '',
				lefttime: 0,
				comments: [],
				show: false,
				title: '提示',
				content: '请您确认文件资料是否完善完毕'
			};
		},
		onLoad(option) {
			this.ordersId = option.ordersId;

		},
		onPullDownRefresh() {
			console.log('rrrr');
			this.init();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		created() {
			this.init();
		},
		methods: {
			// 取消订单接口
			confirm(v) {
				this.$http('mine.cancelOrdersL', {
					ordersId: this.ordersId,
					cancelReason: v
				}).then(r => {
					console.log(r);
					if (r.code = 200) {
						// this.orders.splice(this.currentIndex, 1)
						this.cancelShow = false;
						setTimeout(() => {
							this.$u.toast(r.msg);
						})
						uni.navigateBack({
							delta:1
						})
						this.init()
					}
				});
			},
			init() {
				this.getinfo();
				this.getComments();
			},
			getComments() {
				this.$http('lorder.comments', {
					ordersId: this.ordersId

				}).then(r => {
					if (r.code == 200) {
						this.comments = r.data;
						console.log('sdas ', r);
					}
				});
			},
			topay() {
				this.go('/pages/pay/pay?orderid=' + this.ordersId);
			},
			wanshan() {
				this.go('/pages/my/order/perfectDataSJ?orderid=' + this.ordersId + '&designId=' + this.infodate.designId)
			},
			pingjia() {
				this.go('/pages/my/evaluate/evaluate?ordersId=' + this.ordersId)
			},
			// 取消按钮
			cancelBtn() {
				this.show = false
			},
			// 确认按钮
			confirmBtn() {
				this.$http('mine.updateOrdersStatus', {
					ordersId: this.ordersId,
					ordersStatus: '4'
				}).then(res => {
					if (res.code == 200) {
						this.init();
						this.show = false
					}
				}).catch(err => {

				})
			},
			// 完成订单
			changeorderStatus() {
				this.show = true

			},
			// 取消订单
			cancelT() {
				// uni.navigateTo({
				// 	url: 'pages/my/order/cancelOrder?ordersId=' + this.ordersId
				// })
				// this.cancelShow = true;
				// this.currentOrderid = id;
				// this.currentIndex = index;
				// console.log(11);
				this.cancelShow = true
			},
			prview(i, url) {
				uni.previewImage({
					current: i,
					urls: url,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			Back() {
				//uni.navigateBack()//默认delta:1
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			copy(number) {

				uni.setClipboardData({
					data: number,
					success: (result) => {
						this.$u.toast('复制成功');
					},
					fail: (error) => {
						this.$u.toast('网络出错');
					}
				})
			},
			getinfo() {
				this.$http('mine.getSJex', {
					orderId: this.ordersId
				}).then(res => {
					if (res.code == 200) {
						console.log(res.data, 'getinfo');
						this.infodate = res.data;
						if (res.data.designDrawings) {
							this.designDrawings = res.data.designDrawings.split(',');
						}
						if (res.data.renderings) {
							this.renderings = res.data.renderings.split(',');
						}
						if (res.data.designIllustrates) {
							this.designIllustrates = res.data.designIllustrates.split(',');
						}
						this.lefttime = this.timeProcessing(res.data.ordersTime);
						this.ordersStatus = res.data.ordersStatus

					}
				}).catch(err => {

				})
			},
			timeProcessing(e) {
				let timeDate = e;
				let Time = new Date(timeDate);
				let timestemp1 = Time.getTime();
				let timestamp2 = new Date().getTime();

				return timestemp1 + 86400000 - timestamp2;
			},
		},
	};
</script>

<style scoped lang="scss">
	.scroll {
		margin-top: 136rpx;
		height: calc(100vh - 250rpx);
	}

	::v-deep .u-count-down__text {
		color: #D3F9FF;
		font-size: 28rpx;
	}

	.section_3 {
		background-color: #1d6aff;
		border-radius: 1.5px;
		width: 3px;
		height: 14px;
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.commentbtn {
		width: 152rpx;
		height: 56rpx;
		background: rgba(29, 106, 255, 0.1000);
		border: 1px solid #1C62F9;
		opacity: 1;
		border-radius: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.commentdate {

		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 42rpx;
		color: #999999;
		opacity: 1;
		margin-top: 24rpx;
	}

	.comment_content {
		width: 654rpx;
		margin-top: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 42rpx;
		color: #333333;
		opacity: 1;
	}

	.comment_pic {
		margin-top: 24rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: 156rpx;
		grid-gap: 10rpx;
	}

	.gray {
		background-color: #F5F8F7;
		height: 100rpx;
		width: 100%;

	}

	.line {
		width: 654rpx;
		height: 1px;
		background: #EEEEEE;
		opacity: 1;
		border-radius: 0px;
		margin-top: 24rpx;
	}

	.equal-division-item {
		margin-left: 7.5px;

		border-radius: 8rpx;
		width: 208rpx;
		height: 208rpx;

	}

	.page {
		background-color: #f6f7f9ff;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section_1 {
		padding: 27.5px 12.25px 70.25px;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b127f6d029820011531bae/16557836621628592893.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.group_4 {
		margin-top: -54.5px;
		padding: 0 12px 16px;
		position: relative;
	}

	.section_8 {
		// background-color: #1C62F9;
		padding: 32rpx;
		background-color: #ffffff;
		box-shadow: 0px -0.5px 0px 0px #eeeeee;
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.group {
		z-index: 6;
		background-image: linear-gradient(to right, #1D73FA, #2B9FFC, #2FABFC);
		width: 100%;
		padding-top: 80rpx;
		padding-bottom: 10rpx;
		position: fixed;
		// box-shadow: 0 1rpx 0 0 #64aff1;
	}

	.group_1 {
		margin-top: 21.5px;
	}

	.section_2 {
		padding: 15px 11px 20px 12px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.section_4 {
		margin-top: 10.5px;
		padding-left: 12px;
		padding-right: 11px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.section_5 {
		margin-top: 10px;
		padding: 14.5px 12px 16px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.section_55 {
		margin-top: 10px;
		padding: 19px 16px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.section_6 {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		margin-top: 10px;
		padding: 10px 12px 16px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.section_66 {
		margin-top: 20.5px;
		padding: 10.5px 74.25px 11.5px;
		background-color: #f6f7f9;
		border-radius: 4px;
	}

	.section_7 {
		margin-top: 10px;
		padding: 0 12px 17px;
		background-color: #ffffff;
		border-radius: 8px;
	}

	.group_24 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text-wrapper_1 {
		background-color: #1d6aff;
		color: #ffffff;
		border-radius: 16px;
		width: 86px;
		height: 32px;
		margin-right: 20rpx;


	}

	.text-wrapper_22 {
		background-color: #eee;
		border-radius: 16px;
		width: 86px;
		height: 32px;
		margin-right: 20rpx;

	}

	.text-wrapper_22 .text_35 {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333;
	}

	.text_36 {
		width: 100%;
		height: 100%;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.image {
		position: absolute;
		left: 35rpx;
		bottom: 12rpx;
		width: 19rpx;
		height: 36rpx;
	}

	.text {
		color: #ffffff;
		font-size: 18px;
	}

	.group_2 {
		padding-bottom: 3px;
		position: relative;
	}

	.group_3 {
		margin-right: 19px;
		margin-top: 1.75px;
		padding-bottom: 2.25px;
		width: 37.25px;
		position: relative;
	}

	.group_6 {
		margin-top: 19px;
	}

	.group_7 {
		margin-top: 14.5px;
	}

	.group_8 {
		margin-top: 12.5px;
	}

	.group_9 {
		padding: 18px 2px 13.5px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.group_10 {
		height: 90rpx;
		display: flex;
		align-items: center;
		border-bottom: solid 0.5px #eeeeee;
	}

	.group_11 {
		margin-top: 15px;
	}

	.group_12 {
		margin-top: 16.5px;
	}

	.group_13 {
		margin-top: 17px;
		padding: 13.5px 0;
		border-top: solid 0.5px #eeeeee;
	}

	.group_15 {
		padding: 0 2px;
	}

	.equal-division {
		margin-top: 20px;
	}

	.group_16 {
		padding: 14.5px 2px 16px;
	}

	.text-wrapper {
		padding: 10.5px 0 15.5px;
		background-color: #f6f7f9;
		border-radius: 4px;
	}

	.group_17 {
		padding: 14px 0 16px;
		border-bottom: solid 0.5px #eeeeee;
	}

	.group_18 {
		margin-top: 14.5px;
	}

	.group_21 {
		margin-top: 15.5px;
	}

	.group_22 {
		margin-top: 15.5px;
	}

	.group_23 {
		margin-top: 18.5px;
	}

	.image_7 {
		flex-shrink: 0;
		width: 18px;
		height: 17.5px;
	}

	.text_34 {
		margin-left: 9px;

		color: #191919;
		font-size: 12px;


	}

	.text_35 {
		color: #ffffff;
		font-size: 25rpx;
		font-family: '.AppleSystemUIFont';

	}

	.text_1 {
		color: #ffffff;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		margin-top: -8px;
	}

	.text_2 {
		color: #D3F9FF;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 30px;
	}

	.image_1 {
		filter: drop-shadow(0px 1.5px 1.5px #1a60e266);
		width: 32.5px;
		height: 40px;
	}

	.image_2 {
		filter: drop-shadow(0px 1.5px 1.5px #1a60e266);
		width: 18.5px;
		height: 21px;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.view {
		margin-top: 6px;
	}

	.text_3 {
		margin-left: 9px;
		color: #333333;
		font-size: 16px;
		font-weight: 600;
	}

	.text_4 {
		color: #666666;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_5 {
		margin-right: 1.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_6 {
		color: #666666;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_7 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_8 {
		color: #666666;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_9 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';

	}

	.view_1 {
		margin: 2.5px 0;
	}

	.text_10 {
		margin-left: 9px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.text_11 {
		color: #333333;
		font-size: 14px;
	}

	.text_12 {
		display: flex;
		flex-direction: row;
		text-align: left;
		margin-left: 115px;
		color: #fe641a;
		font-size: 14px;
	}

	.text_13 {
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #999999;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_133 {
		display: flex;
		justify-content: start;
		align-items: center;
		color: #999999;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_14 {
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_15 {
		color: #999999;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_16 {

		color: #191919;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_17 {
		margin: 3.5px 8px 1.5px 0;
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
		line-height: 19px;
	}

	.group_14 {
		height: 19px;
	}

	.view_2 {
		margin-top: 6px;
	}

	.text_20 {
		margin-left: 9px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.text_222 {
		margin-left: 3.5px;
		color: #1d6aff;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.radio-16 {
		border-radius: 16rpx;
	}

	.text_233 {
		margin-top: 1rpx;
		margin-left: 15px;
		color: #1c4ca8;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.image_3 {
		margin-left: 10rpx;
		margin-bottom: 20rpx;
	}

	.view_3 {
		margin-top: 6px;
	}

	.text_21 {
		margin-left: 9px;
		color: #333333;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
		font-weight: 600;
	}

	.text_211 {
		margin-bottom: 10.5px;
		color: #333333;
		font-size: 14px;
		font-family: '.AppleSystemUIFont';
	}

	.text_22 {
		margin-left: 12px;
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.view_4 {
		margin-top: 6.5px;
	}

	.image_6 {
		margin-left: 8.5px;
		width: 66px;
		height: 20px;
	}

	.text_25 {
		width: 180rpx;
		display: flex;
		justify-content: flex-end;
		margin-left: 5px;
		align-self: flex-end;
		color: #1c4ca8;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.group_20 {
		margin-top: 15px;
	}

	.text_28 {
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_29 {
		margin-left: 20px;
		color: #fe641a;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_30 {
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_31 {
		margin-left: 20px;
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_32 {
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_33 {
		margin-left: 20px;
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_18 {
		color: #fe641a;
		font-size: 10px;
		font-family: '.AppleSystemUIFont';
	}

	.text_19 {
		color: #fe641a;
		font-size: 16px;
		font-family: '.AppleSystemUIFont';
	}

	.text_23 {
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_24 {
		margin-left: 20px;
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_26 {
		color: #999999;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}

	.text_27 {
		margin-left: 20px;
		color: #333333;
		font-size: 12px;
		font-family: '.AppleSystemUIFont';
	}
</style>
